<!DOCTYPE html>
<!-- saved from url=(0052)https://getbootstrap.com/docs/4.0/examples/checkout/ -->
<html lang="en">

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../static/images/i-nice-logo.svg">

    <title>Results-Visualizations</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/checkout/">

    <!-- Bootstrap core CSS -->
    <link href="../static/running_config/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../static/running_config/form-validation.css" rel="stylesheet">
   <link href="../static/css/main.css" rel="stylesheet">
     <script src="../static/js/5ec65ef964.js"></script>
  </head>


  <body class="bg-light">
     <div class="all-content">
        <!-- sidebar links left -->
        <div class="sidebar">
            <h2>
                <img src="../static/images/i-nice-logo.svg" height="100px">
            </h2>
            <ul>
                <li><a href=""><i class="fas fa-home"></i>Home</a></li>
                <li><a href="{{ url_for('ac.running_config') }}"><i class="fas fa-flask"></i>Configurations</a></li>
                <li><a href="./dataset_detail?id={{ runResults['datasetId'] }}"><i class="fas fa-chart-bar"></i>Dataset Details</a></li>
                <li style="background: #C88D33"><a><i class="fas fa-tree"></i>Results</a></li>
             <li><a href="{{ url_for('ac.show_config') }}"><i class="fas fa-flask"></i>Simple Configurations</a></li>
                <li><a id="sidebarsimre"><i class="fas fa-flask"></i>Simple Results </a></li>
            </ul>

            <!-- sidebar links footer tag starts here -->
            <div class="footer_tag">
                <a href="">Copyright Inice visualization 2020</a>

                <!-- sidebar links footer tag ends here -->
            </div>


            <!-- sidebar links left tag ends here -->
        </div>
        <div class="main-content">
            <!-- top welcome message -->
            <div class="header">
                <h1 align="center" >
                    Welcome to Inice Visualization Platform
                </h1>

{#                <p align="right" style="margin-right: 50px;margin-bottom: 0;">#}
{#                    <a href="logout">logout</a>#}
{#                </p>#}

            </div>

            <div class="infoUp" style="background-color: transparent; box-shadow: None;display: flex; justify-content: space-between; align-items: center;">
<!--                <h4>Configuration Name: <input type="text" name="" id="configNameInput" > </h4>-->
                <h4 style="color: #1D3956;letter-spacing: 2px;font-size: 1rem; margin-bottom: 0; margin-top: 20px;">Configuration Name: <a style="letter-spacing: 2px;font-size: 1rem;background-color: #1d3956; padding: 0 30px; color: white; border-radius: 10px;margin: 0 20px;">{{ runResults['name'] }}</a> </h4>
{#                <div class="searchbar" style="font-size: 30px; color: #4e555b; display: flex">#}
{#                    <input placeholder="Search the result:" style="border-radius: 5px; border: none;#}
{#                    background-color: #e5e5e5; width: 350px; text-align: center; padding: 10px; font-size: 20px;">#}
{#                    <div class="search button" style="width: 100px; height: 50px; border-radius: 5px; background-color: #1d3956;color: white;font-size: 15px;text-align: center;line-height: 50px;">Search</div>#}
{#                </div>#}
                <p align="right" style="margin-right: 30px;margin-bottom: 0;">
                    <a href="logout">logout</a>
                </p>
            </div>

            <!-- TODO:  Adding a Search Bar for default page -->


            <div class="info">


              <div class="info3" style="background: white;">


    <div class="">

<!--============================================================================================== ONE -->
      <div class="row">
        <div class="col-md-12 order-md-1">
          <form class="needs-validation" novalidate="" method="POST" onkeypress="return event.keyCode != 13;">
            <h4 class="mb-3">Summary of Configurations</h4>
            <div class="row">
              <div class="col-md-6 mb-3">
                <fieldset disabled>
                <label for="datasetName">Dataset</label>
                <input type="text" class="form-control" name="datasetName" id="datasetName" placeholder="" value={{runResults['datasetName']}} required="">
                </fieldset>
              </div>

              <div class="col-md-6 mb-3" style="right:23%;">
                <fieldset disabled>
                <label for="numOfOb">Number of Observers</label>
                <input type="text" class="form-control" name="numOfOb" id="numOfOb" placeholder="" value={{runResults['numOfOb']}} required="">
                </fieldset>
              </div>

              <div class="col-md-12 mb-3">
                <fieldset disabled>
                <label for="ObGenClass">Observer Generator</label>
                <input type="text" class="form-control" name="ObGenClass" id="ObGenClass" placeholder="" value={{runResults['ObGenClass']}} required="">
                </fieldset>
              </div>

              <div class="col-md-12 mb-3">
                <table border="0" style=" text-align: center;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                         width: 1000px;
                         padding:10px;
                         margin-top: 10px;
                       ">

                  <thead>
                    <th>#Ob</th>
                    <th>One2OneDistance</th>
                    <th>N2NDistances</th>
                    <th>Cluster Estimator</th>
                    <th>filter Configuration</th>
                  </thead>
                  <tbody>
                  {% block page_content %}
                  {% for row in runResults['obDetail'] %}
                  <tr>
                    <td>{{row['obCode']}}</td>
                    <td>{{row['p2pDis']}}</td>
                    <td>{{row['n2nDis']}}</td>
                    <td>{{row['estimator']}}</td>
                    <td>{{row['filterConfiguration']}}</td>
                  </tr>
                  {% endfor %}
                  {% endblock %}
                  </tbody>
                </table>
              </div>
            </div>

<!--============================================================================================Make Modification-->
            <div class="mb-3">
              <div class="mb-3">
                <h4 class="mb-3">Summary of results</h4>
              </div>
              <div class="col-md-12 mb-3" style="padding-left: 0">
                <table border="0" style="text-align: center;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                         width: 1000px;
                         padding:10px;
                         margin-top: 10px;">
                  <thead>
                    <th>True#Clusters</th>
                    <th>Estimated#Clusters</th>
                    <th>ARI</th>
                    <th>NMI</th>
                    <th>Purity</th>
                    <th>RunTime</th>
                  </thead>
                  <tbody>
                  <tr>
                    <td>{{runResults['trueClustersNum']}}</td>
                    <td>{{runResults['estClusters']}}</td>
                    <td>{{runResults['ARI']}}</td>
                    <td>{{runResults['NMI']}}</td>
                    <td>{{runResults['purity']}}</td>
                    <td>{{runResults['runtime']}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>

              <div class="col-md-12 mb-3" style="padding-left: 0">
                <table border="0" style="text-align: center;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                         width: 1000px;
                         padding:10px;
                         margin-top: 20px;">
                  <thead>
                    <th colspan="2">True Centers</th>
                  </thead>
                  <tbody>
                  {% for i in range(runResults['trueClustersNum']) %}
                  <tr>
                    <td>t{{ i+1 }}</td>
                    <td>{{runResults['trueCenters'][i]}}</td>
                  </tr>
                  {% endfor %}
                  </tbody>
                </table>
                  <table border="0" style="text-align: center;
                             box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                             width: 1000px;
                             padding:10px;
                             margin-top: 20px;">
                      <thead>
                        <th colspan="2">Estimated Centers</th>
                      </thead>
                      <tbody>
                  {% for i in range(runResults['estClusters']) %}
                  <tr>
                    <td>{{runResults['estCenters_match'][i][0]}}</td>
                    <td>{{runResults['estCenters_match'][i][1]}}</td>
                  </tr>
                  {% endfor %}
                  </tbody>
                </table>
              </div>

              <div class="col-md-12 mb-3" style="padding-left: 0">
                <table border="0" style="text-align: center;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                         width: 1000px;
                         padding:10px;
                         margin-top: 20px;">
                  <thead>
                    <th>#Observer</th>
                    <th colspan="2">view point</th>
                  </thead>
                  <tbody>
                  {% for i in range(runResults['numOfOb']) %}
                  <tr>
                    <td>{{runResults['obDetail'][i]['obCode']}}</td>
                    <td>v{{ i+1 }}</td>
                    <td>{{runResults['ob'][i]}}</td>
                  </tr>
                  {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>

            <hr class="mb-4">
{#            <div id="results_two_dimensions">#}
              <div>
              <div class="mb-3">
                <h4 class="mb-3">Two Dimensional View of Results:</h4>
                <div id="summaryView" style="width: 800px;height:600px;"></div>
                <a id="download_summaryView" href="">download</a>
                <script src="./static/running_config/echarts.min.js"></script>
                <script src="../static/running_config/jquery-3.5.1.js"></script>
                <script type="text/javascript">
                 $('#download_summaryView').on('click', function(){
                  divBlock = document.getElementById('summaryView');
                  content = divBlock.querySelector('svg').outerHTML;
                  blob= new Blob([content], {type: 'xml/svg'});
                  $(this).attr("href", URL.createObjectURL(blob));
                  $(this).attr("download", 'i-nice.svg');
                  })
                 $("#sidebarsimre").click(function () {
                  var old_sidesimre = document.getElementById("sidebarsimre");
                  if(old_sidesimre.href==""){
                      alert("Please enter the page via simple config!")
                  }
                });
                var myChart = echarts.init(document.querySelector('#summaryView'), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                var trueCenters = {{ runResults['trueCenters_dr'] }};
                var ob = {{ runResults['ob_dr'] }};
                var dataset = {{ runResults['dataset_dr'] }};
                var estCenters = {{ runResults['estCenters_dr'] }};
                var splitdata = {{ runResults['splitdata'] }};
                var kmeancenterlist = {{ runResults['kmeanscenter'] }}
                option = {
                    title: {
                        text: '{{ a }}',
                        subtext: ''
                    },
                    grid: {
                        left: '3%',
                        right: '7%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        // trigger: 'axis',
                        confine: true ,
                        showDelay: 0,
                        formatter: function (params) {
                            return params.seriesName + ' | id: ' + (params.dataIndex+1) + ' | record: '+ params.value;
                        },
                        axisPointer: {
                            show: true,
                            type: 'cross',
                            lineStyle: {
                                type: 'dashed',
                                width: 1
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                            },
                            restore: {}
                        }
                    },
                    xAxis: [
                        {
                            show: true,
                            type: 'value',
                            scale: true,
                            axisLabel: {
                                formatter: '{value}'
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            show: true,
                            type: 'value',
                            scale: true,
                            axisLabel: {
                                formatter: '{value} '
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    series: [
                    {
                        name: 'dataset',
                        type: 'scatter',
                        color: '#b6f142',
                        data: dataset
                    },
                    {
                        name: 'estimated centres',
                        type: 'scatter',
                        color: '#f1265d',
                        data: kmeancenterlist
                    },
                    {
                        name: 'true centres',
                        type: 'scatter',
                        symbol: 'pin' ,
                        color: '#2c58f1',
                        symbolSize: 20,
                        data: trueCenters
                    },
                    {
                        name: 'observers',
                        type: 'scatter',
                        symbol: 'diamond' ,
                        symbolSize: 25,
                        data: ob
                    }
                    ]
                };
                myChart.setOption(option);
                </script>
              </div>
            </div>
            <hr class="mb-4">
<!--            ======================================================================================================-->
            <div class="mb-3">
<!--                check box -->
              <div id="centers_by_observers">
                <h4 class="mb-3">Centers found by observers:</h4>
                <table>
                  <tr>
                    {% for i in range(runResults['numOfOb']) %}
                    <td>
                      {{runResults['obDetail'][i]['obCode']}}
                      <input type="checkbox" value="" id={{runResults['obDetail'][i]['obCode']}}>&nbsp;&nbsp;&nbsp;
                      <script>
                      $("#{{runResults['obDetail'][i]['obCode']}}").change(function () {
                          if($(this).is(':checked')){
                              // alert('checked')
                              // $("#{{runResults['obDetail'][i]['obCode']}}_centers_download").show();
                              // $("#{{runResults['obDetail'][i]['obCode']}}_centers").show();
                              $("#{{runResults['obDetail'][i]['obCode']}}_div").show();
                              $("#{{runResults['obDetail'][i]['obCode']}}_centers").attr("style", "width: 600px;height:400px;");
                              var myChart = echarts.init(
                                  document.querySelector("#{{runResults['obDetail'][i]['obCode']}}_centers"), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                              option = {
                                  title: {
                                      text: 'b'+({{ i }}+1),
                                      x: 'center',
                                      y: 'bottom'
                                  },
                                  grid: {
                                      left: '3%',
                                      right: '7%',
                                      bottom: '7%',
                                      containLabel: true
                                  },
                                  tooltip: {
                                      // trigger: 'axis',
                                      confine: true ,
                                      showDelay: 0,
                                      formatter: function (params) {
                                          return params.seriesName + ' | id: ' + (params.dataIndex+1) + ' | record: '+ params.value;
                                      },
                                      axisPointer: {
                                          show: true,
                                          type: 'cross',
                                          lineStyle: {
                                              type: 'dashed',
                                              width: 1
                                          }
                                      }
                                  },
                                  xAxis: [
                                      {
                                          show: true,
                                          type: 'value',
                                          scale: true,
                                          axisLabel: {
                                              formatter: '{value}'
                                          },
                                          splitLine: {
                                              show: false
                                          }
                                      }
                                  ],
                                  yAxis: [
                                      {
                                          show: true,
                                          type: 'value',
                                          scale: true,
                                          axisLabel: {
                                              formatter: '{value} '
                                          },
                                          splitLine: {
                                              show: false
                                          }
                                      }
                                  ],
                                  series: [
                                  {
                                      name: 'observers',
                                      type: 'scatter',
                                      symbol: 'diamond',
                                      symbolSize: 25,
                                      data: [{{ runResults['ob_dr'][i] }}]
                                  },
                                  {
                                      name: 'dataset',
                                      type: 'scatter',
                                      color: '#00c809',
                                      data: {{ runResults['dataset_dr'] }}
                                  },
                                  {
                                      name: 'estimated centres',
                                      type: 'scatter',
                                      color: '#f1265d',
                                      data: {{ centersFoundByOb[i] }}
                                      // Need to found what is the centersFoundByOb
                                      {#data: {{runResults['estCenters_dr']}}#}
                                  },
                                  {
                                      name: 'true centers',
                                      type: 'scatter',
                                      symbol: 'pin',
                                      color: '#2c58f1',
                                      symbolSize: 20,
                                      data: {{ runResults['trueCenters_dr'] }},
                                  }
                                  ]
                              };
                              myChart.setOption(option);

                          }
                          if($(this).is(':checked') == false){
                              // alert('unchecked')
                              $("#{{runResults['obDetail'][i]['obCode']}}_centers").attr("style", "");
                              $("#{{runResults['obDetail'][i]['obCode']}}_centers").attr("_echarts_instance_", "");
                              $("#{{runResults['obDetail'][i]['obCode']}}_centers").empty();
                              // $("#{{runResults['obDetail'][i]['obCode']}}_centers").hide();
                              // $("#{{runResults['obDetail'][i]['obCode']}}_centers_download").hide();
                              $("#{{runResults['obDetail'][i]['obCode']}}_div").hide();
                          }
                      })
                      </script>
                    </td>
                    {% endfor %}
                  </tr>
                </table>

              </div>
<!--              image-->
              <div id="cenFoundObs">
                <div class='row'>
                {% for i in range(runResults['numOfOb']) %}
                  <div class="col-md-6 mb-3"  id={{runResults['obDetail'][i]['obCode']}}_div style="display: none;">
                    <div id={{runResults['obDetail'][i]['obCode']}}_centers ></div>
                    <a id="{{runResults['obDetail'][i]['obCode']}}_centers_download" href="">download</a>
                  </div>
                <script>
                  $("#{{runResults['obDetail'][i]['obCode']}}_centers_download").on('click', function(){
                  divBlock = document.getElementById("{{runResults['obDetail'][i]['obCode']}}_centers");
                  content = divBlock.querySelector('svg').outerHTML;
                  blob= new Blob([content], {type: 'xml/svg'});
                  $(this).attr("href", URL.createObjectURL(blob));
                  $(this).attr("download", 'centersFoundByObserver.svg');
                  })
                </script>
                {% endfor %}
                </div>
              </div>
            </div>
<!--            =====================================================================================================-->

            <div id="summary_of_statistics">
              <div class="mb-3">
                <h4 class="mb-3">
                  Summary statistics of observer b[<input type="number" min="1" step=1 max="{{ runResults['numOfOb'] }}" value=1 id="obSum" style="height:25px;width:45px;"/>]:
                </h4>
              </div>
              <div class="row">
                <div class="col-md-6 mb-3">
                <div id="obSum_polar" style="width:600px;height:400px;"></div>
                <a id="obSum_polar_download" href="">download</a>
                  <script>
                    $("#obSum_polar_download").on('click', function(){
                    divBlock = document.getElementById("obSum_polar");
                    content = divBlock.querySelector('svg').outerHTML;
                    blob= new Blob([content], {type: 'xml/svg'});
                    $(this).attr("href", URL.createObjectURL(blob));
                    $(this).attr("download", 'polar_coord.svg');
                    })
                  </script>
                </div>
                <div class="col-md-6 mb-3">
                <div id="obSum_kde" style="width:600px;height:400px;"></div>
                <a id="obSum_kde_download" href="">download</a>
                  <script>
                    $("#obSum_kde_download").on('click', function(){
                    divBlock = document.getElementById("obSum_kde");
                    content = divBlock.querySelector('svg').outerHTML;
                    blob= new Blob([content], {type: 'xml/svg'});
                    $(this).attr("href", URL.createObjectURL(blob));
                    $(this).attr("download", 'kde.svg');
                    })
                  </script>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 mb-3">
                <div id="obSum_aicc" style="width:600px;height:400px;"></div>
                <a id="obSum_aicc_download" href="">download</a>
                  <script>
                    $("#obSum_aicc_download").on('click', function(){
                    divBlock = document.getElementById("obSum_aicc");
                    content = divBlock.querySelector('svg').outerHTML;
                    blob= new Blob([content], {type: 'xml/svg'});
                    $(this).attr("href", URL.createObjectURL(blob));
                    $(this).attr("download", 'aicc.svg');
                    })
                  </script>
                </div>
                <div class="col-md-6 mb-3">
                <div id="obSum_den" style="width:600px;height:400px;"></div>
                <a id="obSum_den_download" href="">download</a>
                  <script>
                  $("#obSum_den_download").on('click', function(){
                  divBlock = document.getElementById("obSum_den");
                  content = divBlock.querySelector('svg').outerHTML;
                  blob= new Blob([content], {type: 'xml/svg'});
                  $(this).attr("href", URL.createObjectURL(blob));
                  $(this).attr("download", 'density.svg');
                  })
                </script>
                </div>
              </div>
              <script>
              $("#obSum").change(function () {
                  var idx = Number($(this).val()) - 1;
                  //FIG1 =======================================================================================
                  var myChart = echarts.init(document.querySelector("#obSum_polar"), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                  var polarDataset = {{ polarDataset }}[idx];
                  var polarSpcPoints = {{ polarSpcPoints}}[idx] ;
                  var polarEstCenters = {{ polarEstCenters }}[idx];
                  var polarCenters = {{ polarCenters }}[idx];
                  for (var i = 0; i <= 100; i++) {
                      var theta = i / 100 * 360;
                      var r = 150 * (1 + Math.sin(theta / 180 * Math.PI));
                  }
                  option = {
                  title: {
                      text: 'b'+ (idx+1),
                      x: 'center',
                      y: 'bottom'
                  },
                  legend: {
                      data: ['line']
                  },
                  polar: {center: ['50%' , '50%']},
                  tooltip: {
                      // trigger: 'axis',
                      confine: 0 ,
                      showDelay: 0,
                      formatter: function (params) {
                          return params.seriesName + ' | id: ' + (params.dataIndex+1) + ' | record: '+ params.value;
                      },
                      axisPointer: {
                          type: 'cross'
                      },
                  },
                  angleAxis: {
                      splitLine: {show: false},
                  },
                  radiusAxis: {
                  },
                  // xAxis: [
                  //     {
                  //         name: 'x' ,
                  //         show: true,
                  //         type: 'value',
                  //         scale: true,
                  //         axisLabel: {
                  //             formatter: '{value}'
                  //         },
                  //         splitLine: {
                  //             show: false
                  //         }
                  //     }
                  //     ],
                  // yAxis: [
                  //     {
                  //         name: 'y',
                  //         show: true,
                  //         type: 'value',
                  //         scale: true,
                  //         axisLabel: {
                  //             formatter: '{value} '
                  //         },
                  //         splitLine: {
                  //             show: false
                  //         }
                  //     }],
                  series: [
                      {
                          name: 'dataset',
                      color: 'rgba(150,200,0,0.5)',
                      coordinateSystem: 'polar',
                      type: 'scatter',
                      data: polarDataset
                      },
                      {# {
                          name: 'xyrange',
                      type: 'line',
                      symbolSize: 10,
                       coordinateSystem: 'polar',
                      data: polarSpcPoints
                      }, #}
                      {
                          name: 'estimated centers',
                      type: 'scatter',
                       coordinateSystem: 'polar',
                      color: 'rgba(255,27,17,0.89)',
                      data: polarEstCenters
                      },
                      {
                          name: 'observers',
                      type: 'scatter',
                      symbol: 'diamond' ,
                      symbolSize: 15 ,
                      coordinateSystem: 'polar',
                      color: 'rgba(0,0,0,0.89)',
                      data: [[0,0]],
                       label: {
                              color: 'rgba(0,0,0,0.9)',
                              formatter: 'V'+(idx+1),
                              position: 'right',
                              show: true
                          },
                      },
                      {
                          name: 'true centers',
                      type: 'scatter',
                      color: 'rgba(0,37,250,0.9)',
                      symbol: 'pin' ,
                      symbolSize: 20 ,
                      coordinateSystem: 'polar',
                      data: polarCenters,
                      label: {
                              color: 'rgba(0,0,0,0.9)',
                              formatter: ' ',
                              fontSize: 15 ,
                              position: 'left',
                              show: true
                          },
                      }
                  ]
              };
                  myChart.setOption(option);
                  // FIG2 =========================================================================================
                  var myChart = echarts.init(document.querySelector('#obSum_kde'), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                  var distances = {{distances}}[idx];
                  var den_dis = {{den_dis}}[idx];
                  option = {
                  title: [
                        {
                            text: 'b'+ (idx+1),
                            x: 'center',
                            y: 'bottom'
                        },
                       {
                          text: 'Kernel Density Esimate',
                          borderColor: '#000000',
                          borderWidth: 1,
                          textStyle: {
                              fontSize: 14
                          },
                          left: '50%',
                          top: '15%'
                      }
                  ],
                  xAxis: [
                      {
                          name: 'Normalized',
                          nameLocation: 'center',
                          show: true,
                          type: 'value',
                          scale: true,
                          axisLabel: {
                              formatter: '{value}'
                          },
                          splitLine: {
                              show: true
                          }
                      }
                  ],
                  yAxis: [
                      {
                          name: 'density',
                          nameLocation: 'center',
                          nameGap: 20,
                          show: true,
                          type: 'value',
                          scale: true,
                          axisLabel: {
                              formatter: '{value} '
                          },
                          splitLine: {
                              show: true
                          }
                      }
                  ],
                  series: [
                  {
                      symbolSize: 5,
                      data: distances,
                      type: 'scatter'
                  },
                  {
                      name: 'Kernel Density Esimate',
                      symbolSize: 0 ,
                      data: den_dis,
                      type: 'line'
                  }
                  ]
                  };
                  myChart.setOption(option);
                  // FIG3 ==========================================================================================
                  var myChart = echarts.init(document.querySelector('#obSum_aicc'), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                  var aiccList = {{aiccList}}[idx]
                  var bestFitAicc = {{bestFitAicc}}[idx]
                  option = {
                      tooltip: {
                          showDelay: 0,
                          formatter: function (params) {
                              if (params.value.length > 1) {
                                  return ' x = '
                                  + params.value[0] + '  y = '
                                  + params.value[1];
                              }
                          },
                      },
                       xAxis: [
                          {
                              name: 'Num. of clusters' ,
                              show: true,
                              type: 'value',
                              scale: true,
                              axisLabel: {
                                  formatter: '{value}'
                              },
                              splitLine: {
                                  show: false
                              }
                          }
                      ],
                       yAxis: [
                          {
                              name: 'AICc',
                              show: true,
                              type: 'value',
                              scale: true,
                              axisLabel: {
                                  formatter: '{value} '
                              },
                              splitLine: {
                                  show: false
                              }
                          }
                      ],
                      series: [
                          {
                            left: '52%' ,
                            right: '5% ',
                            data: aiccList,
                            type: 'line'
                          },
                          {
                            type: 'scatter',
                            symbolSize: 15,
                            color: '#000000',
                            //The lowest point
                            data: bestFitAicc
                          },
                      ]
                  };
                  myChart.setOption(option);
                  // FIG4 ==========================================================================================
                  var myChart = echarts.init(document.querySelector('#obSum_den'), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                  var den_mix_best = {{den_mix_best}}[idx];
                  var distances_best = {{distances_best}}[idx];
                  var bestMix_compNum = {{bestMix_compNum}}[idx];
                  var bestMix_aicc = {{bestMix_aicc}}[idx];
                  option = {
                      title: [
                          {
                              text: 'b'+ (idx+1),
                              x: 'center',
                              y: 'bottom'
                          },
                          {
                              text: 'Mixture Model, k='+bestMix_compNum+'\nAICc='+bestMix_aicc,
                              borderColor: '#000000',
                              borderWidth: 1,
                              textStyle: {
                                  fontSize: 14
                              },
                              left: '50%',
                              top: '7%'
                          }
                      ],
                      xAxis: [
                          {
                              name: 'Normalized' ,
                              show: true,
                              type: 'value',
                              scale: true,
                              axisLabel: {
                                  formatter: '{value}'
                              },
                              splitLine: {
                                  show: true
                              }
                          }
                      ],
                      yAxis: [
                          {
                              name: 'density',
                              show: true,
                              type: 'value',
                              scale: true,
                              axisLabel: {
                                  formatter: '{value} '
                              },
                              splitLine: {
                                  show: true
                              }
                          }
                      ],
                      series: [
                          {% for i in range(bestEst_maxComp) %}
                          {
                              type: 'line',
                              // smooth: 0.6,
                              symbol: 'none',
                              lineStyle: {
                                  color: 'black',
                                  width: 1
                              },
                              data: den_mix_best[{{ i }}]
                          },
                          {% endfor %}
                          {
                              symbolSize: 10,
                              data: distances_best,
                              type: 'scatter'
                          },
                      ]
                  };
                  myChart.setOption(option);
              })
              $('#obSum').change(); //init
              </script>
            </div>
<!--            ======================================================================================================-->
            <hr class="mb-4">
            <div id="filtering_process">
              <div class="mb-3">
                <h4 class="mb-3">
                  Filtering process of observer b[<input type="number" id="obId" value="1" step="1" min="1" max="{{ runResults['numOfOb'] }}" style="height:25px;width:45px;"/>],
                  number of mixture components k= <input type="number" id="numOfComp" value="{{ minComp_Ob[0] }}" step="1" min="{{ minComp_Ob[0] }}" max="{{ maxComp_Ob[0] }}" style="height:25px;width:45px;"/>
                  </h4>
              </div>
              <div id="detailModule">
                <div class="row">
                  <div class="col-md-6 mb-3">
<!--                ////////////////////////////////////////////////////////////////////////////////////////// last 1-->
                    <div id="den_mix" style="width: 600px;height:400px;"></div>
                    <a id="den_mix_download" href="">download</a>
                    <script>
                      $("#den_mix_download").on('click', function(){
                      divBlock = document.getElementById("den_mix");
                      content = divBlock.querySelector('svg').outerHTML;
                      blob= new Blob([content], {type: 'xml/svg'});
                      $(this).attr("href", URL.createObjectURL(blob));
                      $(this).attr("download", 'den_mix.svg');
                      })
                    </script>
                  </div>

<!--                ////////////////////////////////////////////////////////////////////////////////////////// last 2-->
                  <div class="col-md-6 mb-3">

                    <div id="den_mix_sum" style="width: 600px;height:400px;"></div>
                    <a id="den_mix_sum_download" href="">download</a>
                    <script>
                      $("#den_mix_sum_download").on('click', function(){
                      divBlock = document.getElementById("den_mix_sum");
                      content = divBlock.querySelector('svg').outerHTML;
                      blob= new Blob([content], {type: 'xml/svg'});
                      $(this).attr("href", URL.createObjectURL(blob));
                      $(this).attr("download", 'den_mix_sum.svg');
                      })
                    </script>

                  </div>
                </div>

                <div class="row">
                  <div class="col-md-6 mb-3" style="margin: 0;">
<!--                ////////////////////////////////////////////////////////////////////////////////////////// last 3-->
                    <div id="param_mix">
                      <table border="0" style="text-align: center;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                         width: 579px; margin: 0 auto;">
                        <tr>
                          <th>epsilon</th>
                          <th>maxIter</th>
                          <th>maxRestarts</th>
                        </tr>
                        <tr>
                          <td id="epsilon" name="epsilon"></td>
                          <td id="maxIter" name="maxIter"></td>
                          <td id="maxRestarts" name="maxRestarts"></td>
                        </tr>
                        <tr>
                          <th>verb</th>
                          <th>Negative LogLikelihood</th>
                          <th>Regular item</th>
                        </tr>
                        <tr>
                          <td id="verb" name="verb"></td>
                          <td id="negLogLikelihood" name="negLogLikelihood"></td>
                          <td id="regItem" name="regItem"></td>
                        </tr>
                      </table>
                      <table border="0" style="text-align: center;
                         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                         width: 500px;
                         margin: 10px auto;">
                        <tr>
                          <th>Estimated Shapes</th>
                          <th>Estimated Scales</th>
                          <th>Estimated Lambda</th>
                        </tr>
                        <tbody id="estPara"></tbody>
                      </table>
                    </div>
                  </div>
                  <div class="col-md-6 mb-3">

                    <div id="polar_mix" style="width: 600px;height:400px;"></div>
                    <a id="polar_mix_download" href="">download</a>
                    <script>
                      $("#polar_mix_download").on('click', function(){
                      divBlock = document.getElementById("polar_mix");
                      content = divBlock.querySelector('svg').outerHTML;
                      blob= new Blob([content], {type: 'xml/svg'});
                      $(this).attr("href", URL.createObjectURL(blob));
                      $(this).attr("download", 'polar_mix.svg');
                      })
                    </script>

                  </div>
                </div>
<!--                ////////////////////////////////////////////////////////////////////////////////////////// last 4-->
                <div><input type="number" id="filterProcess_idx" value="1" step="1" min="1" max="{{ minComp_Ob[0] }}" style="height:25px;width:45px; margin-left:10%;"/>-th component</div>
                <div class="row">
                  <div class="col-md-6 mb-3">
                    <div id="filterView_mix" style="width: 600px;height:400px;"></div>
                    <a id="filterView_mix_download" href="">download</a>
                    <script>
                      $("#filterView_mix_download").on('click', function(){
                      divBlock = document.getElementById("filterView_mix");
                      content = divBlock.querySelector('svg').outerHTML;
                      blob= new Blob([content], {type: 'xml/svg'});
                      $(this).attr("href", URL.createObjectURL(blob));
                      $(this).attr("download", 'filterView_mix.svg');
                      })
                    </script>
                  </div>
<!--                ////////////////////////////////////////////////////////////////////////////////////////// last 5-->
                  <div class="col-md-6 mb-3">
                    <div id="filterIdx_mix" style="width: 600px;height:400px;"></div>
                    <a id="filterIdx_mix_download" href="">download</a>
                    <script>
                      $("#filterIdx_mix_download").on('click', function(){
                      divBlock = document.getElementById("filterIdx_mix");
                      content = divBlock.querySelector('svg').outerHTML;
                      blob= new Blob([content], {type: 'xml/svg'});
                      $(this).attr("href", URL.createObjectURL(blob));
                      $(this).attr("download", 'filterIdx_mix.svg');
                      })
                    </script>
                  </div>
                  <script type="text/javascript">
                  $('#filterProcess_idx').on('change', function(){
                  $.ajax({
                      type:"POST",
                      url:"/run_results",
                      dataType:"json",
                      data:{
                          "code": 'filterProcess_idx',
                          "filterProcess_idx": $(this).val()-1,
                          "obId": $("#obId").val()-1,
                          "numOfComp": $("#numOfComp").val(),
                          "runnerId": {{ runResults["id"] }}
                          },
                      success:function(data){
                            var myChart = echarts.init(document.querySelector('#filterView_mix'), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                            var dataset_test = data['dataset_test'];
                            var dataset = data['dataset'];
                            var ellData = data['ellData'];
                            var filterProcess = data['filterProcess'];
                            var ellData_test = data['ellData_test'];
                            option = {
                                title: {
                                    text: 'filter process',
                                    orient: 'vertical' ,
                                    subtext: ''
                                },
                                grid: {
                                    left: '3%',
                                    right: '7%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                tooltip: {
                                    // trigger: 'axis',
                                    confine: true ,
                                    showDelay: 0,
                                    formatter: function (params) {
                                        return params.seriesName  + ' | record: '+ params.value;
                                    }
                                },
                                toolbox: {
                                    feature: {
                                        dataZoom: {
                                        },
                                        restore: {}
                                    }
                                },
                                xAxis: {
                                    show: true ,
                                    name: 'X',
                                    scale: true ,
                                    splitLine: {
                                            show: false
                                        }
                                },
                                yAxis: {
                                    name: 'y' ,
                                    scale: true ,
                                    splitLine: {
                                            show: false
                                        }
                                },
                                legend: {
                                    orient: 'vertical',
                                    right: 0,
                                    data: filterProcess
                                },
                                series: [
                                    {
                                        name: 'dataset',
                                        type: 'scatter',
                                        data: dataset,
                                        symbolSize: 7,
                                    },
                                    {
                                        name: 'data of this component',
                                        type: 'scatter',
                                        data: dataset_test,
                                        color: '#00c809',
                                        symbolSize: 7,
                                    },
                                    {% for i in range(maxIter_Filter) %}
                                    {
                                        name: filterProcess[{{ i }}]+'_point',
                                        type: 'scatter',
                                        data: ellData_test[{{ i }}],
                                        symbolSize: 7
                                    },
                                    {% endfor %}

                                    // {% for i in range(maxIter_Filter) %}
                                    // {
                                    //     name: filterProcess[{{ i }}],
                                    //     type: 'line',
                                    //     symbolSize: 0,
                                    //     data: ellData[{{ i }}]
                                    // },
                                    // {% endfor %}
                                ]
                            };
                            myChart.setOption(option);

                            // process tree
                            var myChart = echarts.init(document.querySelector('#filterIdx_mix'), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                            var treeData = data['treeData'];
                            var option = {
                                tooltip: {
                                    trigger: 'item',
                                    triggerOn: 'mousemove',
                                    formatter: function (params) {
                                        return params.value[0] + params.value[1];
                                    },
                                },
                                series:[
                                    {
                                        type: 'tree',
                                        id: 0,
                                        name: 'tree1',
                                        data: [treeData],

                                        top: '10%',
                                        left: '28%',
                                        bottom: '20%',
                                        right: '20%',

                                        symbolSize: 40,
                                        orient: 'vertical',

                                        edgeShape: 'polyline',
                                        edgeForkPosition: '63%',
                                        initialTreeDepth: 4,
                                        lineStyle: {
                                            width: 2
                                        },
                                        label: {
                                            backgroundColor: '#fff',
                                            position: '',
                                            verticalAlign: 'middle',
                                            align: 'right',
                                            fontSize: 15
                                        },
                                        leaves: {
                                            label: {
                                                position: '',
                                                verticalAlign: 'middle',
                                                align: 'left'
                                            }
                                        },
                                        expandAndCollapse: true,
                                        animationDuration: 550,
                                        animationDurationUpdate: 750
                                    }
                                ]
                            };
                            myChart.setOption(option);
                      },
                      error:function(jqXHR){
                          alert("Error")
                      }
                      });
                  })
                </script>
                </div>

              </div>
              <script>
                $(document).ready(function () {
                $("#obId").change(function () {
                    $("#detailModule").show();
                    $("#numOfComp").attr("max", {{ maxComp_Ob }}[$(this).val()-1]);
                    $("#numOfComp").attr("min", {{ minComp_Ob }}[$(this).val()-1]);

                    $.ajax({
                        type:"POST",
                        url:"/run_results",
                        dataType:"json",
                        data:{
                            "code": 'obId',
                            "obId": $(this).val()-1,
                            "numOfComp": $("#numOfComp").val(),
                            "runnerId": {{ runResults["id"] }}
                        },
                        success:function(data){
                            //FIG 1
                            var myChart = echarts.init(document.querySelector('#den_mix'), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                            option = {
                                title: [
                                    {
                                        text: '',
                                        x: 'center',
                                        y: 'bottom'
                                    },
                                    {
                                        text: 'Mixture Model, k='+$("#numOfComp").val()+'\nAICc='+(data['estAbs']['negLogLikelihood']+data['estAbs']['regItem']),
                                        borderColor: '#000000',
                                        borderWidth: 1,
                                        textStyle: {
                                            fontSize: 14
                                        },
                                        left: '60%',
                                        top: '7%'
                                    }
                                ],
                                xAxis: [
                                    {
                                        name: 'Normalized' ,
                                        show: true,
                                        type: 'value',
                                        scale: true,
                                        axisLabel: {
                                            formatter: '{value}'
                                        },
                                        splitLine: {
                                            show: true
                                        }
                                    }
                                ],
                                yAxis: [
                                  {
                                      name: 'density',
                                      show: true,
                                      type: 'value',
                                      scale: true,
                                      axisLabel: {
                                          formatter: '{value} '
                                      },
                                      splitLine: {
                                          show: true
                                      }
                                  }
                                ],
                                series: [
                                 {% for i in range(maxComp_AllOb) %}
                                  {
                                      type: 'line',
                                      // smooth: 0.6,
                                      symbol: 'none',
                                      lineStyle: {
                                          color: 'black',
                                          width: 1
                                      },
                                      areaStyle: {},
                                      data: data['den_mix'][{{i}}]
                                  },
                                  {% endfor %}
                                  {
                                      symbolSize: 5,
                                      color:'rgba(137,255,37,0.89)',
                                      data: data['distances'],
                                      type: 'scatter'
                                  }
                                ]
                            };
                            myChart.setOption(option);
                            //FIG 2
                            var myChart = echarts.init(document.querySelector("#polar_mix"), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                            var polarDataset_mix = data['polarDataset_mix'];
                            var polarCenters_mix = data['polarCenters_mix'];
                            for (var i = 0; i <= 100; i++) {
                                var theta = i / 100 * 360;
                                var r = 150 * (1 + Math.sin(theta / 180 * Math.PI));
                            }
                            option = {
                                title: {
                                    text: ''
                                },
                                legend: {
                                    data: ['line']
                                },
                                polar: {center: ['50%' , '50%']},
                                tooltip: {
                                    // trigger: 'axis',
                                    confine: 0 ,
                                    showDelay: 0,
                                    formatter: function (params) {
                                        return params.seriesName + ' | record: '+ params.value;
                                    },
                                    axisPointer: {
                                        type: 'cross'
                                    },
                                },
                                angleAxis: {
                                    splitLine: {show: false},
                                },
                                radiusAxis: {
                                },
                                // xAxis: [
                                //     {
                                //         name: 'x' ,
                                //         show: true,
                                //         type: 'value',
                                //         scale: true,
                                //         axisLabel: {
                                //             formatter: '{value}'
                                //         },
                                //         splitLine: {
                                //             show: false
                                //         }
                                //     }
                                //     ],
                                // yAxis: [
                                //     {
                                //         name: 'y',
                                //         show: true,
                                //         type: 'value',
                                //         scale: true,
                                //         axisLabel: {
                                //             formatter: '{value} '
                                //         },
                                //         splitLine: {
                                //             show: false
                                //         }
                                //     }],
                                series: [
                                    {% for i in range(maxComp_AllOb) %}
                                    {
                                        name: 'data of component ' + ({{i}}+1),
                                    coordinateSystem: 'polar',
                                    type: 'scatter',
                                    symbolSize: 5,
                                    data: polarDataset_mix[{{ i }}]
                                    },
                                    {% endfor %}
                                    {
                                        name: 'observers',
                                    type: 'scatter',
                                    symbol: 'diamond' ,
                                    symbolSize: 15 ,
                                    coordinateSystem: 'polar',
                                    color: 'rgba(0,0,0,0.89)',
                                    // observer
                                    data: [[0,0]],
                                     label: {
                                            color: 'rgba(0,0,0,0.9)',
                                            formatter: 'Observer',
                                            position: 'right',
                                            show: true
                                        },
                                    },
                                    {
                                        name: 'true centers',
                                    type: 'scatter',
                                     symbol: 'pin' ,
                                    color: 'rgba(0,3,250,0.9)',
                                    symbolSize: 20 ,
                                    coordinateSystem: 'polar',
                                    data: polarCenters_mix
                                    }
                                ]
                            };
                            myChart.setOption(option);

                            // FIG 3
                            {#TODO: compatible with Gaussian Version #}
                            if(typeof(data['estAbs']['epsilon']) == "undefined"){
                                console.log("what?")
                                document.getElementById('epsilon').innerText = "\/";
                                document.getElementById('maxIter').innerText = "\/";
                                document.getElementById('maxRestarts').innerText = "\/";
                                document.getElementById('verb').innerText = "\/";
                            }else{
                                console.log("why?")
                                document.getElementById('epsilon').innerText = data['estAbs']['epsilon'];
                                document.getElementById('maxIter').innerText = data['estAbs']['maxIter'];
                                document.getElementById('maxRestarts').innerText = data['estAbs']['maxRestarts'];
                                document.getElementById('verb').innerText = data['estAbs']['verb'];
                            }
                            {#document.getElementById('epsilon').innerText = data['estAbs']['epsilon'];#}
                            {#document.getElementById('maxIter').innerText = data['estAbs']['maxIter'];#}
                            {#document.getElementById('maxRestarts').innerText = data['estAbs']['maxRestarts'];#}
                            {#document.getElementById('verb').innerText = data['estAbs']['verb'];#}
                            document.getElementById('negLogLikelihood').innerText = data['estAbs']['negLogLikelihood'];
                            document.getElementById('regItem').innerText = data['estAbs']['regItem'];
                            $("#estPara").empty();

                            for(var i=0; i<$('#numOfComp').val(); i++) {

                                var tr = document.createElement("tr"),
                                    td1 = document.createElement("td"),
                                    td2 = document.createElement("td"),
                                    td3 = document.createElement("td");

                                td1.innerHTML = data['estPara']['estShapes'][i];
                                td2.innerHTML = data['estPara']['estScales'][i];
                                td3.innerHTML = data['estPara']['estLbd'][i];
                                tr.appendChild(td1);
                                tr.appendChild(td2);
                                tr.appendChild(td3);

                                var tbody = document.getElementById("estPara");
                                tbody.appendChild(tr);

                            }

                            var myChart = echarts.init(document.querySelector('#den_mix_sum'), null, {renderer: 'svg', width: 'auto', height: 'auto'});
                            option = {
                                title: [
                                    {
                                        text: '',
                                        x: 'center',
                                        y: 'bottom'
                                    }
                                ],
                                legend: {

                                },
                                xAxis: [
                                    {
                                        name: 'Normalized' ,
                                        show: true,
                                        type: 'value',
                                        scale: true,
                                        axisLabel: {
                                            formatter: '{value}'
                                        },
                                        splitLine: {
                                            show: true
                                        }
                                    }
                                ],
                                yAxis: [
                                  {
                                      name: 'density',
                                      show: true,
                                      type: 'value',
                                      scale: true,
                                      axisLabel: {
                                          formatter: '{value} '
                                      },
                                      splitLine: {
                                          show: true
                                      }
                                  }
                                ],
                                series: [
                                 {
                                     name: 'estimated distribution',
                                     color: 'rgb(98, 217, 115)',
                                      type: 'line',
                                      symbol: 'none',
                                      lineStyle: {
                                          color: 'rgb(73,155,84)',
                                          width: 1
                                      },
                                      areaStyle: {color: 'rgb(98,217,115)'},
                                      data: data['den_mix_sum']
                                  },
                                    {
                                        name: 'real distribution',
                                        color: 'black',
                                      type: 'line',
                                      symbol: 'none',
                                      lineStyle: {
                                          color: 'black',
                                          width: 2
                                      },
                                      data: data['density']
                                  }
                                ]
                            }
                            myChart.setOption(option);



                            // FIG 4 & // FIG 5
                            $("#filterProcess_idx").change();
                        },
                        error:function(jqXHR){
                            alert("This mixture estimator fail to estimate, so nothing to show");
                            $("#detailModule").hide();
                        }
                    });
                })
                $("#numOfComp").change(function () {
                    $("#filterProcess_idx").attr("max", $("#numOfComp").val());
                    $("#filterProcess_idx").val(1);
                    $("#obId").change();
              })
                $("#obId").change();
              })
              </script>
            </div>
          </form>
        </div>
      </div>

      <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">© Copyright-2020 Big Data Institute Shenzhen University</p>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">Privacy</a></li>
          <li class="list-inline-item"><a href="#">Terms</a></li>
          <li class="list-inline-item"><a href="#">Support</a></li>
        </ul>
      </footer>
    </div>
              </div>
            </div>
        </div>
     </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
<!--    <script src="../static/running_config/jquery-3.2.1.slim.min.js.download" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>-->
<!--    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>-->
    <script src="../static/running_config/popper.min.js.download"></script>
    <script src="../static/running_config/bootstrap.min.js.download"></script>
    <script src="../static/running_config/holder.min.js.download"></script>
    <script>
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function() {
        'use strict';

        window.addEventListener('load', function() {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');

          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>

  <style>
    .tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}
    .tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}
    .ws_toolbar {z-index:100000}
    .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px}
    .tb_highlight{background-color:yellow}
    .tb_hide {visibility:hidden}
    .ws_toolbar img {padding:2px;margin:0px}
  </style>
  </body>
</html>
